<template>
	<HeaderNav active-index="1"></HeaderNav>
	
	<!-- 添加标题 -->
	<div class="page-title">
		<h2>{{ className }}班级学生任务完成情况</h2>
	</div>
	
	<TaskContainer>
	  <div class="task-center-content">
		<!-- 图表展示 -->
		<div class="chart-section">
		  <el-card 
			shadow="hover" 
			v-for="(student, index) in list" 
			:key="student.id" 
			class="student-card"
		  >
			<div :id="'task-chart-' + student.id" class="chart"></div>
			<div class="card-actions">
			  <el-button type="warning" size="small" @click="handleApplyTask(index, student)">
				<template #icon>
				  <el-icon><Document /></el-icon>
				</template>
				分配任务
			  </el-button>
			  <el-button type="info" size="small" @click="handlerResetPassword(index, student)">
				<template #icon>
				  <el-icon><Refresh /></el-icon>
				</template>
				重置密码
			  </el-button>
			  <el-button type="danger" size="small" @click="handleDelete(index, student)">
				<template #icon>
				  <el-icon><Lock /></el-icon>
				</template>
				禁用用户
			  </el-button>
			</div>
		  </el-card>
		</div>
	  </div>
	</TaskContainer>
	<!-- 添加底部备案信息 -->
	<Footor></Footor>


	<el-dialog v-model="showDialog" title="分配任务" width="70%" top="10px">
		<GroupTaskListView ref="taskList" />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="assignTaskToStudent">确认分配</el-button>
			<el-button @click="showDialog = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>
</template>
	
<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Footor from "@/components/Footor.vue"
import * as echarts from 'echarts'; 
import GroupTaskListView from "../group/GroupTaskListView.vue";
import API from '@/api/index.js'
import Token from '@/api/token.js'

export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Footor,
		GroupTaskListView, 
	},
	data() {
		return {
			showDialog: false,
			list: [],
			chartInstances: {}, // 存储图表实例，用于避免重复初始化
			currentUser: null, // 当前用户信息
			className: 'XXXX', // 默认班级名称
			currentStudent: null, // 当前选中的学生
		}
	},
	mounted() {
		this.list.forEach(student => {
			this.initChart(student);
		});
	},
	created() {
		this.getUsersTaskData();
		this.getCurrentUser();
	},
	methods: {
		initChart(student) {
			try {
				// 检查必要的字段是否存在
				if (!student || !student.id) {
					console.error('学生数据不完整:', student);
					return;
				}
				
				const chartId = 'task-chart-' + student.id;
				const chartDom = document.getElementById(chartId);
				if (!chartDom) {
					console.error(`找不到id为${chartId}的DOM元素`);
					return;
				}
				
				// 如果已经存在图表实例，先销毁它
				if (this.chartInstances[chartId]) {
					this.chartInstances[chartId].dispose();
				}
				
				// 确保数据字段存在，如果不存在则使用默认值
				const name = student.name || student.username || '未知学生';
				const email = student.email || student.username || '';
				const taskCount0 = Number(student.task_count_0);
				const taskCount1 = Number(student.task_count_1);
				const taskCount2 = Number(student.task_count_2);
				const taskCount3 = Number(student.task_count_3);
				const taskCount4 = Number(student.task_count_4);
				const taskCount5 = Number(student.task_count_5);
				
				// 创建新的图表实例并存储
				const myChart = echarts.init(chartDom);
				this.chartInstances[chartId] = myChart;
				
				const option = {
					title: {
						text: name,
						subtext: email,
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['未开始', '进行中', '需讲解','已提交','已检查','已完成',]
					},
					series: [
						{
							name: '任务状态',
							type: 'pie',
							radius: '50%',
							label: {
								position: 'inside',
								formatter: '{c}',
							},
							data: [
								{ value: taskCount0, name: '未开始' },
								{ value: taskCount1, name: '进行中' },
								{ value: taskCount2, name: '需讲解' },
								{ value: taskCount3, name: '已提交' },
								{ value: taskCount4, name: '已检查' },
								{ value: taskCount5, name: '已完成' },
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				myChart.setOption(option);
			} catch (error) {
				console.error('初始化图表时出错:', error);
			}
		},

		// 获取所有用户的任务状态统计数据
		getUsersTaskData(params = {}){
			// 清理所有现有图表实例
			this.clearCharts();
			
			// 添加参数到API调用
			API.getTaskStatus(params).then(res => {
				// 打印完整响应，查看实际结构
				// console.log('API完整响应:', res);
				
				// 保存原始数据，以便后续对比
				const originalList = [...this.list];
				
				// 检查响应格式，尝试不同的数据路径
				let responseData = null;
				
				if (res && res.data) {
					// 标准格式：res.data
					// console.log('找到标准格式数据 res.data:', res.data);
					responseData = res.data;
				} else if (res && Array.isArray(res)) {
					// 直接是数组
					// console.log('响应直接是数组:', res);
					responseData = res;
				} else if (res && typeof res === 'object') {
					// 尝试查找其他可能的数据字段
					console.log('检查其他可能的数据字段');
					const possibleDataFields = ['items', 'results', 'records', 'list', 'content'];
					for (const field of possibleDataFields) {
						if (res[field] && Array.isArray(res[field])) {
							// console.log(`找到数据字段 res.${field}:`, res[field]);
							responseData = res[field];
							break;
						}
					}
				}
				
				// 如果找到了数据
				if (responseData && Array.isArray(responseData)) {
					// 清空列表并重新赋值
					this.list = [];
					
					// 检查数据结构，进行必要的转换
					this.list = responseData.map(item => {
						// 打印第一条数据的结构
						// if (responseData.indexOf(item) === 0) {
						// 	console.log('第一条数据结构:', item);
						// }
						
						// 返回标准化的数据结构
						return {
							id: item.id || item.user_id || item.userId || responseData.indexOf(item) + 1,
							name: item.name || item.username || item.user_name || '学生' + (responseData.indexOf(item) + 1),
							email: item.email || item.mail || item.username || '',
							task_total_count: Number(item.task_total_count || item.totalCount || 100),
							task_count_0: Number(item.task_count_0 || item.count0),
							task_count_1: Number(item.task_count_1 || item.count1),
							task_count_2: Number(item.task_count_2 || item.count2),
							task_count_3: Number(item.task_count_3 || item.count3),
							task_count_4: Number(item.task_count_4 || item.count4),
							task_count_5: Number(item.task_count_5 || item.count5),
							task_rate: Number(item.task_rate || item.rate)
						};
					});
					
					// console.log('处理后的list数据:', this.list);
					
					// 重新初始化图表
					this.$nextTick(() => {
						// console.log('准备初始化图表，当前list数据长度:', this.list.length);
						this.list.forEach(student => {
							this.initChart(student);
						});
					});
				} else {
					console.error('未能找到有效的数据结构:', res);
					this.$message.warning('API返回的数据格式不正确，使用默认数据');
					
					// 使用模拟数据
					this.useMockData();
				}
			}).catch(error => {
				console.error('获取任务状态数据失败:', error);
				this.$message.error('获取任务状态数据失败: ' + (error.message || '未知错误'));
				
				// 使用模拟数据
				this.useMockData();
			});
		},

		// 清理所有图表实例
		clearCharts() {
			Object.values(this.chartInstances).forEach(chart => {
				if (chart && chart.dispose) {
					chart.dispose();
				}
			});
			this.chartInstances = {};
		},

		// 使用模拟数据
		useMockData() {
			console.log('使用模拟数据');
			this.list = [];
			
			// 重新初始化图表
			this.$nextTick(() => {
				this.list.forEach(student => {
					this.initChart(student);
				});
			});
		},
		handleApplyTask(index, student) {
			this.currentStudent = student;
			this.showDialog = true;
		},
		handlerResetPassword(index, student) {
			this.$layer.confirm("您确定要将密码重置为【123456】吗?", $index => {
				this.$layer.close($index);
				API.reset(student.id).then(res => {
					console.log('密码重置响应:', res);
					if (res && res.code === 200) {
						this.$message.success('密码重置成功，新密码为：123456');
					} else {
						this.$message.warning(res?.message || '密码重置可能未成功，请检查服务器响应');
					}
				}).catch(error => {
					console.error('密码重置失败:', error);
					let errorMsg = '密码重置失败';
					
					if (error.response) {
						// 服务器响应了错误状态码
						if (error.response.status === 400) {
							errorMsg = '请求参数有误，请确认用户ID正确';
						} else if (error.response.status === 401) {
							errorMsg = '未授权，请重新登录';
							// 可以在这里添加重定向到登录页面的逻辑
						} else if (error.response.status === 404) {
							errorMsg = '找不到该用户，请确认用户ID正确';
						} else if (error.response.data && error.response.data.message) {
							errorMsg = error.response.data.message;
						}
					}
					
					this.$message.error(errorMsg);
				});
			});
		},
		handleDelete(index, student) {
			this.$layer.confirm("您确定要禁用该用户吗?", $index => {
				this.$layer.close($index);
				API.disableUser(student.id).then(res => {
					console.log('禁用用户响应:', res);
					this.$message.success('用户已成功禁用');
				}).catch(error => {
					console.error('禁用用户失败:', error);
				});
			})
		},
		getCurrentUser() {
			try {
				this.currentUser = Token.getUser();
				// console.log('当前用户信息:', this.currentUser);
				
				if (this.currentUser) {
					if (this.currentUser.className) {
						this.className = this.currentUser.className;
					} else if (this.currentUser.clazz_name) {
						this.className = this.currentUser.clazz_name;
					} else if (this.currentUser.clazz_id) {
						this.className = `班级ID: ${this.currentUser.clazz_id}`;
					}
					// console.log('班级名称:', this.className);
				} else {
					console.warn('未获取到用户信息');
				}
			} catch (error) {
				console.error('获取用户信息失败:', error);
			}
		},
		assignTaskToStudent() {
			// 获取选中的任务
			const taskList = this.$refs.taskList;
			if (!taskList) {
				this.$message.warning('任务列表组件未加载');
				return;
			}
			
			// 获取表格实例和选中的行
			const table = taskList.$refs.tb;
			if (!table) {
				this.$message.warning('请先选择要分配的任务');
				return;
			}
			
			// 获取选中的行，兼容不同版本的Element Plus
			let selectedRows;
			if (typeof table.getSelectionRows === 'function') {
				selectedRows = table.getSelectionRows();
			} else if (typeof table.getSelection === 'function') {
				selectedRows = table.getSelection();
			} else {
				// 如果以上方法都不存在，尝试直接访问selection属性
				selectedRows = table.selection;
			}
			
			if (!selectedRows || selectedRows.length === 0) {
				this.$message.warning('请先选择要分配的任务');
				return;
			}
			
			// 获取当前学生
			if (!this.currentStudent || !this.currentStudent.id) {
				this.$message.warning('未选择学生或学生信息不完整');
				return;
			}
			
			// 准备请求参数
			const taskIds = selectedRows.map(row => row.id);
			
			// 为每个任务单独发送请求
			const promises = taskIds.map(taskId => {
				// 根据API接口的实际要求构造参数
				const params = {
					task_id: taskId,
					user_id: this.currentStudent.id
				};
				
				// 如果需要教师ID，添加它
				if (this.currentUser && this.currentUser.id) {
					params.teacher_id = this.currentUser.id;
				}
				
				console.log('发送分配任务请求，参数:', params);
				return API.assign_Task(params);
			});
			
			// 等待所有请求完成
			Promise.all(promises)
				.then(results => {
					console.log('分配任务响应:', results);
					this.$message.success('任务分配成功');
					// 更新学生的任务状态
					this.getUsersTaskData();
				})
				.catch(error => {
					console.error('分配任务失败:', error);
					let errorMsg = '分配任务失败';
					
					if (error.response) {
						// 服务器响应了错误状态码
						if (error.response.status === 400) {
							errorMsg = '请求参数有误，请检查任务ID和用户ID是否正确';
							// 打印更详细的错误信息
							if (error.response.data) {
								console.error('错误详情:', error.response.data);
							}
						} else if (error.response.status === 401) {
							errorMsg = '未授权，请重新登录';
						} else if (error.response.status === 404) {
							errorMsg = '找不到相关资源';
						} else if (error.response.data && error.response.data.message) {
							errorMsg = error.response.data.message;
						}
					}
					
					this.$message.error(errorMsg);
				})
				.finally(() => {
					this.showDialog = false;
				});
		}
	},
	beforeDestroy() {
		// 销毁所有图表实例，避免内存泄漏
		Object.values(this.chartInstances).forEach(chart => {
			if (chart && chart.dispose) {
				chart.dispose();
			}
		});
		this.chartInstances = {};
	}
}
</script>

<style scoped>
.task-center-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 50px 100px; /* 添加左右两侧的空间 */
	background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.page-title {
	text-align: left;
	margin: 20px 50px;
	color: #f9f9f9;
}

.chart-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.student-card {
	flex: 0 1 calc(20% - 20px); /* 每行展示5个学生，减去间距 */
	box-sizing: border-box;
}

.chart {
	width: 100%;
	height: 200px; /* 调整图表高度以适应布局 */
}

.card-actions {
	display: flex;
	justify-content: space-around;
	margin-top: 10px;
}

@media (max-width: 800px) {
  .task-center-content {
    padding: 0 4px 60px;
  }
  .page-title {
    margin: 10px 4px;
    font-size: 16px;
    text-align: center;
  }
  .chart-section {
    flex-direction: column;
    gap: 10px;
  }
  .student-card {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 90%;
    margin-bottom: 10px;
	margin-left: 22px;
  }
  .chart {
    height: 180px;
  }
  .card-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
  }
  .card-actions .el-button {
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin-left: 0 !important;
  }
  .el-button {
    font-size: 13px !important;
    padding: 4px 8px !important;
  }
}
</style>